<template>
	<view class="wanl-withdraw">
		<view class="edgeInsetTop"> </view>
		<!-- <view class="padding-tb-bj" @tap="$wanlshop.to('/pages/user/bank/bank?choice=1')">
			<view class="bank" v-if="bankData">
				<image :src="`/static/images/bank/${bankData.bankCode}.png`"></image>
				<view class="content">
					<text>{{bankData.bankName}}</text>
					<view class="wanl-gray">
						<text>尾号 {{getCode(bankData.cardCode)}} {{getType(bankData.cardType)}}</text>
					</view>
				</view>
				<view class="action">
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="bank" v-else>
				<view class="content" style="height: 80rpx; line-height: 80rpx;">
					<text>选择提现账户</text>
				</view>
				<view class="action">
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
		</view> -->
		<view class="top">
			<view class="title">
				<image src="https://fen.fuliaoxx.com/img/new/goods/j.png" class="title__icon" mode=""></image> 我的余额
			</view>
			<view class="wanl-withdraw__num">
				{{info.money || '0.00'}}
			</view>
		</view>
		<view class="box">
			<view class="box__title">
				<text>{{$getText('提现金额')}}  </text>
				<!-- <text class="text-sm wanl-gray" v-if="servicefee > 0">（费率 {{servicefee/10}}%）</text> -->
			</view>
			<view class="u-flex u-flex-y-center"
				style="font-size: 71.92rpx;border-bottom: 1rpx solid #F3F3F3;padding-bottom: 28rpx;">
				<view class="symbol">
					<text>￥</text>
				</view>
				<input type="digit" maxlength="5" focus v-model="money" />
				<view class="text-lg wanl-gray-light" v-if="money">
					<text class="wlIcon-shibai"></text>
				</view>
			</view>
			<view class="">
				<view class="pay" v-for="(item,index) in paylist" :key="index" @click="cur=index">
					<image :src="'https://fen.fuliaoxx.com/img/new/money/'+item.icon+'.png'" class="pay__icon" mode="">
					</image>
					<view class="pay__text">
						{{$getText(item.name) }}
					</view>
					<view class="checkbox">
						<image v-if="cur==index" src="https://fen.fuliaoxx.com/img/new/car/check.png" class="checked"
							mode=""></image>
						<view class="check" v-else>

						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- <view class="padding-bj bg-white money">
			<view class="text-lg">
				<text>提现金额</text>
				<text class="text-sm wanl-gray" v-if="servicefee > 0">（费率 {{servicefee/10}}%）</text>
			</view>
			<view class="margin-tb-bj price">
				<view class="symbol">
					<text>￥</text>
				</view>
				<input type="digit" maxlength="5" focus @input="replaceInput"/>
				<view class="text-lg wanl-gray-light" @tap="emptyInput" v-if="money">
					<text class="wlIcon-shibai"></text>
				</view>
			</view>
			<view class="solid-top padding-top-bj">
				<block v-if="servicefee > 0">
					<text class="wanl-gray-light">服务费</text>
					<text class="text-price text-orange margin-left-xs">{{servicemoney}}</text>
					<text class="wanl-gray-light">，</text>
				</block>
				<text class="wanl-gray-light">可用余额</text>
				<text class="wanl-gray-light margin-lr-xs text-price">{{usermoney}}</text>
				<text class="text-orange" v-if="usermoney > 0" @tap="moneyAll">全部</text>
			</view>
		</view> -->
		<view class="padding-bj margin-top">
			<!-- 1.0.5升级 -->
			<button class="mix-btn" style="background-color: #010101;color: #FFFFFF;border-radius: 48rpx;"
				:loading="loading" :disabled="loading" @tap="withdraw"> {{$getText("提现") }}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankData: null,
				usermoney: 0,
				money: null,
				servicemoney: 0,
				servicefee: 0,
				loading: false,
				paylist: [{
						name: '微信提现',
						icon: 'wx'
					},
					// {name:'支付宝提现',icon:'zfb'},
				],
				cur: 0,
				info: {}
			};
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				await uni.request({
					url: '/index/shopInfo',
					method: "GET",
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					},
					success: res => {
						res.data.shopInfo.money = Number(res.data.shopInfo.money);
						this.info = res.data.shopInfo;
					}
				});
			},
			async withdraw() {
				let that = this;
				// 1.0.5升级 修复针对多次点击
				if (this.loading) return;
				this.loading = true;
				// 1.0.6升级
				let money = parseFloat(this.money);
				// usermoney = parseFloat(this.usermoney);
				// if (!this.bankData) {
				// 	this.$wanlshop.msg('请选择账号');
				// 	return;
				// }
				if (money <= 0) {
					this.$wanlshop.msg('请填写正确金额');
					return;
				}
				if (money > this.info.money) {
					this.$wanlshop.msg('提现金额不能超过 ' + this.info.money + ' 元');
					return;
				}
				await uni.request({
					url: '/wanlshop/pay/shopwithdraw',
					method: 'POST',
					data: {
						money: money,
						// account_id: this.bankData.id
					},
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					},
					success: res => {
						this.loadData();
						// 1.0.5升级
						this.loading = false;
						// 跳转成功
						// this.$wanlshop.to('/pages/page/success?type=withdraw');
					},
					complete() {
						that.loading = false;
					}
				});
			},
			setMoney(money) {
				this.usermoney = money;
				this.$store.commit('user/setUserInfo', {
					money: money
				});
			},
			replaceInput(e) {
				this.money = e.target.value;
				this.servicemoney = e.target.value > 0 ? (e.target.value * this.servicefee / 1000).toFixed(2) : 0;
			},
			emptyInput() {
				this.money = null;
			},
			moneyAll() {
				this.money = this.usermoney;
			},
			getCode(str) {
				str = str.replace(/\s+/g, "");
				return str.substring(str.length - 4);
			},
			getType(key) {
				return ['储蓄卡', '信用卡'][key];
			}
		}
	}
</script>

<style lang="scss">
	.wanl-withdraw {
		padding: 30rpx;

		&__num {
			font-family: DINNextLTPro, DINNextLTPro;
			font-weight: bold;
			font-size: 53rpx;
			color: #000000;
			line-height: 38rpx;
			padding: 36rpx 0 0 28rpx;
		}
	}

	.symbol {
		font-size: 47.95rpx;
		margin-right: 10rpx;
	}

	.wanl-withdraw .money .price {
		display: flex;
		align-items: center;
	}

	input {
		/* #ifdef MP */
		height: 100rpx;
		min-height: 100rpx;
		/* #endif */
		width: 100%;
		font-size: 71.92rpx;
	}

	.wanl-withdraw .bank {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx 25rpx;
	}

	.wanl-withdraw .bank image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 25rpx;
	}

	.wanl-withdraw .bank .content {
		flex: 1;
	}

	.wanl-withdraw .bank .action {}

	.top {
		height: 171rpx;
		background: #f3f0eb;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.title {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
		line-height: 30rpx;
		display: flex;
		align-items: center;
		padding-top: 32rpx;

		&__icon {
			width: 31rpx;
			height: 31rpx;
			margin: 0 11rpx 0 28rpx;

		}
	}

	.box {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 30rpx;
		padding: 34rpx 18rpx 59rpx;

		&__title {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 27rpx;
			color: #1E1E1E;
			line-height: 27rpx;
			padding-left: 5rpx;
			margin-bottom: 40rpx;
		}
	}

	.checked {
		width: 32rpx;
		height: 32rpx;
	}

	.check {
		width: 32rpx;
		height: 32rpx;
		background: #fff;
		border: 3rpx solid #CBCBCB;
		border-radius: 50%;
	}

	.checkbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pay {
		padding: 0 6rpx;
		display: flex;
		align-items: center;
		margin-top: 44rpx;

		&__icon {
			width: 45rpx;
			height: 45rpx;
			margin-right: 20rpx;
		}

		&__text {
			flex: 1;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #1E1E1E;
			line-height: 36rpx;
		}

	}
</style>